<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	

	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
	<title>转角遇见她</title>
	<link rel="apple-touch-icon" sizes="57x57" href="img/applogo57.png">  
<link rel="apple-touch-icon" sizes="72x72" href="img/applogo72.png">  
<link rel="apple-touch-icon" sizes="114x114" href="img/applogo114.png">  
<link rel="apple-touch-icon" sizes="144x144" href="img/applogo144.png"> 
	<link rel="stylesheet" href="dist/css/swiper.min.css">
	<link rel="stylesheet" href="dist/css/animate.min.css">
	<link rel="stylesheet" href="dist/css/animate.css">
	<link rel="stylesheet" href="css/zy.media.min.css">
	<link rel="stylesheet" href="css/css.css">
	<script src="dist/js/jquery-1.8.2.js"></script>
	<style type="text/css">
	
	</style>
</head>
<body onmousewheel="return false;" >
<!-- <audio id="bgMusic" autoplay>
    <source =  src="mp3/加藤達也 - きらめく湖畔.mp3" type="audio/mp3">
   
</audio> -->
<audio src="mp3/加藤達也 - きらめく湖畔.mp3" autoplay loop id="bgMusic"></audio>
<!-- <audio src="mp3/加藤達也 - きらめく湖畔.mp3" autoplay loop></audio> -->
<!-- music -->
<div class="play" id="play"></div>
	<div class="swiper-container">
		<div class="swiper-wrapper">
		<!-- 第一帧 -->
			<div class="swiper-slide move1">
				<!-- 背景图 -->
				<div class="bannerwrap ani" swiper-animate-effect="zoomIn " swiper-animate-duration="1.5s" swiper-animate-delay="0.3s">
					<img src="img/indexElements.png" class="banner1 ani"  >
					<img src="img/indexCloud.png" class="banner1 ani cloud" >
					<img src="img/indexStars.png" class="banner1 ani" >
				</div>

				<!-- 花花 -->
				<div class="flower">
					<img src="img/indexFlowers01.png" class="flower1 ani" swiper-animate-effect="zoomIn " swiper-animate-duration="2s" swiper-animate-delay="0.5s">
					<img src="img/indexTxt.png" class="txt ani" swiper-animate-effect=" fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="0.5s">
					<img src="img/indexFlowers02.png" class="flower2 ani" swiper-animate-effect="zoomIn " swiper-animate-duration="2s" swiper-animate-delay="0.5s">

				</div>
				<!-- 飞机 -->
				<a href="#"  class="planwrap ani"  swiper-animate-effect="zoomInDown " swiper-animate-duration="1.5s" swiper-animate-delay="1s">
					<img src="img/endAvatar.png" class="plane ani"  >
				</a>
				<!-- 底部建筑 -->
				<img src="img/indexBuilding.png" class="bulid ani"  swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
				<!-- 上滑箭头 -->
				<a href="#" class="arrowwrap">
					<img src="img/arrow-up.png" class="arrow-up ani" swiper-animate-effect="fadeInUp " swiper-animate-duration="1s" swiper-animate-delay="1s">
				</a>	

			</div>
			<!-- 第二帧 -->
			<div class="swiper-slide move2wrap">
	           <div class="move2 ani" swiper-animate-effect=" fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="0s">
	           	    <img src="img/page2-text.png" class=" ani" swiper-animate-effect=" fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="0.6s">
	           	    <img src="img/page2-text2.png" class=" ani" swiper-animate-effect=" fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="1s">
	           	    <img src="img/wasStar.png" class=" ani" swiper-animate-effect=" slideInDown" swiper-animate-duration="1s" swiper-animate-delay="1.5s">

	           </div>
			
				<a href="#" class="arrowwrap">
					<img src="img/arrow-up.png" class="arrow-up ani" swiper-animate-effect="fadeInUp fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1s">
				</a>	
			</div>
				<!-- 第三帧 -->
			<div class="swiper-slide move3wrap">
                
                 <div class="move3 ani" swiper-animate-effect=" fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="0s">
                 <!-- 房子 -->
                   <div class="earlyBuilding ani" swiper-animate-effect=" fadeIn" swiper-animate-duration="2s" swiper-animate-delay="0s">
                   	  <img src="img/earlyBuilding.png" class=" ani" swiper-animate-effect=" fadeOut" swiper-animate-duration="3s" swiper-animate-delay="3s">
                   </div>
                   <!-- 早晨 -->
	           	  <div class="earlyTitle ani" swiper-animate-effect=" fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="1s">
	           	  	 <img src="img/earlyTitle.png" class="ani "  swiper-animate-effect=" fadeOut" swiper-animate-duration="3s" swiper-animate-delay="2s">
	           	  </div>
                    <!-- 撤展 -->
                    <div class="earlyBuilding ani" swiper-animate-effect=" fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="4s">
	           	  	 <img src="img/lastBusStation.png" class="ani "  swiper-animate-effect=" fadeOut" swiper-animate-duration="3s" swiper-animate-delay="7s">
	           	  </div>
	           	   <!-- 汽车 -->
	           	    <div class="car ani" swiper-animate-effect=" fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="4s">
	           	  	<img src="img/bus.png" class=" ani" swiper-animate-effect="slideOutLeft" swiper-animate-duration="1s" swiper-animate-delay="5s">
	           	  	
	           	  </div>
	           	  <!-- 人 -->
	           	    <div class="people ani" swiper-animate-effect=" fadeOut" swiper-animate-duration="1.5s" swiper-animate-delay="6s">
	           	  	<img src="img/lastBusAvatar.png" class=" ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s" swiper-animate-delay="5s">
	           	  </div>
                      <!-- 末班车 -->
	           	   <div class="earlyTitle ani" swiper-animate-effect=" fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="4s">
	           	  	 <img src="img/lastBusTitle.png" class="ani "  swiper-animate-effect=" fadeOut" swiper-animate-duration="3s" swiper-animate-delay="5.5s">
	           	  </div>
	           	  <!-- 楼房 -->
	           	     <div class="myTeamBg ani" swiper-animate-effect=" fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="6s">
	           	  	  <img src="img/myTeamAvatar.png" alt="" class=" ani" swiper-animate-effect=" fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="6s">
	           	  	  <img src="img/myTeamWall.png" alt="" class=" ani" swiper-animate-effect=" fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="6s">
	           	  	   <img src="img/myTeamTxt.png" alt="" class=" ani" swiper-animate-effect=" fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="7s">
	           	  <img src="img/myTeamTxt01.png" alt="" class=" ani" swiper-animate-effect=" fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="7.5s">
	           	  <img src="img/myTeamTxt02.png" alt="" class=" ani" swiper-animate-effect=" fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="8.5s">
	           	  <img src="img/myTeamTxt03.png" alt="" class=" ani" swiper-animate-effect=" fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="8s">
	           	  <img src="img/myteamWhereTxt.png" alt="" class=" ani" swiper-animate-effect=" fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="9s">
	           	  </div>
	           	  <!-- 文字 -->

	           	 
	           </div>

				
				<a href="#" class="arrowwrap">

					<img src="img/arrow-up.png" class="arrow-up ani" swiper-animate-effect="fadeInUp fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1s">
				</a>	
			</div>

			<!-- <div class="swiper-slide move4">
			<div class="playvideo">
			<div class="zy_media">
				<video poster="img/3.jpg" data-config='{"mediaTitle": "大可爱"}'>
					<source src="mp3/aa.mp4" type="video/mp4">
				
			 </video>
			</div>
			<div id="modelView">sdfsfd</div>
			</div>
			
			<script src="dist/js/zy.media.min.js"></script>
			<script>
			//document.documentElement.style.overflow='hidden';
			document.body.style.overflow='hidden';
			zymedia('video',{autoplay: true});
			var screenheight = window.screen.height/2;
			$("#modelView").width(window.screen.width);
			$("#modelView").height(window.screen.height);
			var videoheight = $(".zy_media").height()/2;
			var padding_top = screenheight-videoheight;
			
			
			</script>
			
			
				<a href="#" class="arrowwrap">
					<img src="img/arrow-up.png" class="arrow-up ani" swiper-animate-effect="fadeInUp fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1s">
				</a>		
			</div> -->
			<div class="swiper-slide move5 end">
				<img src="img/indexCloud.png" class="banner1  cloud endcloed" >
				<img src="img/endLogo.png" alt="" class="logo ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">
				<img src="img/endTxt.png" alt="" class="endTxt ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="1s" swiper-animate-delay="1s">
				<img src="img/endMail.png" alt="" class="endMail ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="1.3s" swiper-animate-delay="1.1s">
				<img src="img/endClickGuide.png" alt="" class="endClickGuide ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="1.3s" swiper-animate-delay="1.2s">
				<div class="endAvatar ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="1.3s" swiper-animate-delay="1.3s">
					<img src="img/endAvatar.png" alt="" class="endplane " swiper-animate-effect="bounceIn" swiper-animate-duration="3s" swiper-animate-delay="1.3s" >
				</div>
			<img src="img/endBottomTxt.png" alt="" class="endBottomTxt ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="1.3s" swiper-animate-delay="1.4s">
					
			</div>
		</div>
		<!-- 如果需要分页器 -->
		<!--  <div class="swiper-pagination"></div> -->

		<!-- 如果需要导航按钮 -->
   <!--  <div class="swiper-button-prev"></div>
   <div class="swiper-button-next"></div>
   
   如果需要滚动条
   <div class="swiper-scrollbar"></div> -->
</div>


<script src="dist/js/swiper.min.js"></script>
<script src="dist/js/swiper.animate1.0.2.min.js"></script>

<script type="text/javascript">


	var mySwiper = new Swiper ('.swiper-container', {
		direction: 'vertical',
		loop: false,

    // 如果需要分页器
   // pagination: '.swiper-pagination',

    // 如果需要前进后退按钮
    /*nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    
    // 如果需要滚动条
    scrollbar: '.swiper-scrollbar',*/
     onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
    swiperAnimateCache(swiper); //隐藏动画元素 
    swiperAnimate(swiper); //初始化完成开始动画
}, 
onSlideChangeEnd: function(swiper){ 
    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
} 
})        



var audio = document.getElementById("bgMusic");
var video = document.getElementById("video");
/* $("#play").click(function function_name(argument) {
 alert(1)
 })*/
//播放(继续播放)
//audio.play();
 
//暂停
//audio.pause();
audio.play();
 $("#play").toggle(
  function () {
    $(this).addClass("stop");
    audio.pause();
  },
  function () {
    $(this).removeClass("stop");
    audio.play();
  }
);



</script>
</body>
</html>